Esercizi html 2^parte

Materie:	Appunti
Categoria:	Informatica
Download:	1139
Data:	02.02.2006
Numero di pagine:	8
Formato di file:	.doc (Microsoft Word)

2003
ESERCIZI HTML (FRAMES E FORMS)
Nell'esecuzione dei seguenti esercizi è consentito l'uso di Frontpage (o mapedit) solo per le mappe cliccabili (esercizio 1). Tutto il resto va svolto come al solito mediante il NOTEPAD.EXE ovvero il blocco note.

ESERCIZIO 1
Costruire su questa immagine bitmap una mappa cliccabile che richiami le pagine verde.htm, azzurro.htm, bianco.htm, giallo.htm e rosso.htm a seconda del colore della zona cu cui si clicca.
ESERCIZIO 2
Costruire una pagina HTML suddivisa in 3 frames: Titolo, Presidenti e Fotografie (come in figura).
Titolo
Fotografie
Presidenti
Inoltre creare i files Titolo.htm e Presidenti.htm. In Presidenti.htm inserire tutti i nomi dei presidenti aggiungendo i links necessari a caricare nel frame Fotografie la foto corrispondente.
Presidenti USA
Bill Clinton
Clinton
Bush
Reagan
Carter
Ford
Nixon
Johnson
Kennedy
Eisenhower
Truman
Hoover

ESERCIZIO 3
Costruire una pagina HTML suddivisa in 10 frames. Per ogni frame costruire una pagina html contenente:
- la foto di un presidente americano
- un link tale da visualizzare nel frame giallo la scritta "Hai cliccheggiato in scioltezza sul presidente: ".
Chiaramente al posto di deve comparire il nominativo corretto del presidente selezionato.
Hai cliccato in scioltezza su

PS: i nomi dei files immagini contengono il cognome del presidente (es. clinton.gif).
ESERCIZIO 4
Costruire la pagina HTML suddivisa in frames come indicato nella figura successiva. Nella stesura dell'esercizio si tenga presente che il frame 1 è largo ed alto rispettivamente la metà della larghezza e il triplo dell'altezza del frame 2. Il frame 3 contiene ricorsivamente la medesima struttura e le stesse proporzioni.
ESERCIZIO 5
Si consideri la seguente suddivisione in frames:
Impostare i link presenti nelle pagine SRC1.HTM, SRC2.HTM, SRCNW.HTM etc. in modo che il loro comportamento corrisponda alle descrizioni qui elencate.
- Link A1: ad ogni click deve aprire una nuova finestra di IE contenente il file SRC2.HTM
- Link B1: al primo click deve aprire una nuova finestra contenente il file SRC2.HTM. I click successivi ricaricano SRC2.HTM nella finestra appena aperta
- Link C1: dopo aver cliccato, il frame più in basso a destra deve visualizzare la pagina SRC1.HTM
- Link A2: Sostituisce il contenuto dello frame BOTTONI con la pagina SRC1.HTM. Per esercitazione viene posto l'obbligo di utilizzare l'attributo TARGET escludendo tra le possibili soluzioni questa: TARGET=BOTTONI.
- Link B2: Sostituisce i due frame NORDEST e SUDEST con un solo frame contenente SRC1.HTM
- Link A3: Inserisce nella pagina aperta tramite il Link B1 la pagina SRC1.HTM. Se il link A3 non è mai stato richiamato apre una nuova finestra contenente SRC1.HTM.
- Link B3: Sostituisce tutta la pagina visualizzata con la sola pagina HTML SRC1.HTM
- Link A4: Sostituire i 4 frames NORDEST, NORDOVEST, SUDEST e SUDOVEST con unico frame contenente SRC1.HTM
- Link A5: Dopo il click il frame MENU deve essere suddiviso in 4 sottoframes.
PS. Potrebbe essere necessario, per la riuscita dell'esercizio, ricorrere a frame il cui file sorgente html è a sua volta una pagina suddivisa in frames
Al termine dell'esercizio gli studenti devono copiare tutti i files in una sola cartella e poi comprimerla mediante winzip. Il file zippato deve essere caricato sul sito tramite l'apposito bottone inserito all'interno del registro del professore. Attenzione non sono ammessi files zippati superiori a 30 Kb. Questa operazione va fatta da ogni studente
ESERCIZIO 6
Costruire un unico form html contenente gli elementi qui descritti:
- Casella di riepilogo (combo box) contenente l'elenco ordinato dei nominativi di tutti i componenti della vostra classe. Il tuo nominativo deve risultare il valore di default (valore proposto o predefinito).
- Elenco di tutte le discipline affrontate nel vostro corso con a fianco una casellina che deve risultare spuntata in corrispondenza delle materie che non vi esaltano (info è esclusa!).
- Elenco con il vostro livello di conoscenza del linguaggio HTML.
- Casella di testo che visualizza degli asterischi quando digito dei caratteri.
- Elenco dei giorni della settimana come in figura
- Bottone che richiama una pagina a vostra fantasia.
- Area di testo di 4 righe per 80 colonne
ESERCIZIO 7
Modificare lo stile dei TAG headings , , in modo che le caratteristiche grafiche corrispondano a quelle descritte nell'esempio:
La definizione degli stili deve essere fatta in linea per H1 e H2, per i restanti si deve utilizzare la definizione di tipo incorporato
ESERCIZIO 8
Si supponga di scannerizzare un'immagine A4 (29,7 cm x 21 cm) con una risoluzione di 300 dpi e una profondità di colore pari a 32 bit. Calcolare la dimensione dell'immagine ottenuta (senza alcuna compressione) tenendo presente che una pagina A4 in pollici è 8,27 x 11,69.
Qualora l'immagine contenesse un numero di colori differenti (palette) pari a 127 a quanto posso comprimere la mia immagine senza perdere di qualità ?
ESERCIZIO 9 - consegnare dopo le vacanze Natalizie - Uploadare sul registro come eser9.zip
Creare un foglio di stile esterno da usarsi nell'esercizio 10, che consenta una produzione tipografica uniforme del proprio elaborato.
Le specifiche grafiche sono le seguenti:
Per il FRAME TITOLO:
- Nominativi Studenti: ARIAL, 18 pt, colore font blu
Per il FRAME MENU:
- Titolo Menu: VERDANA 14, colore font argento, grassetto
- Tags Html: VERDANA 12, colore font nero senza sottolineatura. Quando passo sopra con il mouse il carattere deve diventare verde e sottolineato.
per il FRAME ATTRIBUTI:
- Nomi attributi: TAHOMA 10, colore font bianco su sfondo blu. Quando passo sopra con il mouse deve essere visualizzato l'effetto rilievo tipico di un pulsante. (ottenibile con bordi colorati di scuro a destra ed in basso, + chiaro in alto e a sinistra)
per il FRAME CONTENUTI:
- Titolo delle sezioni (corrispondente agli attributi): Arial Black, 14 pt
- Titolo sottosezione (Descrizione, esempi etc..):Arial 12Pt, colore grigio, sottolineato
- Testo normale: Tahoma 9pt
- Testo esempi: courier new, 8 pt
ESERCIZIO 10 - consegnare dopo le vacanze Natalizie - Uploadare sul registro come eser10.zip
Costruire un breve manuale sui tag HTML affrontati nel I e II modulo del corso. Il manuale deve essere strutturato in 4 frames come illustrato di seguito:
Cognome Nome (Classe) - Cognome Nome (Classe) [eventuale 2 componente] FRAME=TITOLO
FRAME=MENU
Elenco dei tag HTML
Attributi del TAG selezionato - FRAME=ATTRIBUTI
Spiegazione della sintassi dell'attributo ed esempio
FRAME=CONTENUTO
- Il frame in alto (TITOLO) deve contenere i riferimenti degli autori (2 al massimo per elaborato) ed i links alle loro caselle di posta.
- Il frame sul lato sinistro (MENU) rappresenta l'indice del vostro manuale e dovrà essere riempito con i tags HTML elencati in fondo a questa esercitazione.
- Quando clicco su un tag HTML, nel frame ATTRIBUTI, deve apparire la lista degli attributi associati.
- Cliccando su uno degli attributi presenti nel frame ATTRIBUTI si deve caricare, nel frame CONTENUTO, la sua descrizione completa con relativa sintassi d'uso ed un esempio richiamabile mediante un link.
- La descrizione degli attributi di un tag HTML va fatta in un'unica pagina (esempio table.htm, p.htm, div.htm, img.htm etc.) e pertanto i links nel frame ATTRIBUTI saranno sempre riferimenti interni allo stesso documento (vedi etc.). Gli esempi associati al vostro manuale possono essere accorpati in un uno o più files (es table-samples.htm, p-samples.htm etc.).
- l'esercitazione va impostata con il notepad. L'uso di frontpage non è consentito se non come simulazione per valutare l'impostazione grafica.
- Prima di iniziare il lavoro definite un modello per la pagina generica visualizzata in CONTENUTO.
- Le caratteristiche grafiche del vostro elaborato devono sfruttare il foglio di stile definito con l'esercizio 9.
Esempio di esecuzione:
Rossi Marina (3N) - Verdi Mario (3I)

...


BACKGROUND
Descrizione:
Viene utilizzato per dare al nostro documento un'immagine di sfondo
Sintassi:
dove URL è il percorso relativo od assoluto del file di immagine che rappresenta lo sfondo
Esempio:
clicca qui per vedere l'esempio
BGCOLOR
Descrizione:
Viene utilizzato per dare al nostro documento un colore di sfondo. Questo attributo viene annullato dall'attributo BACKGROUND
Sintassi:

Esempio:
esempi di nomi di colori:
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
clicca qui per vedere l'esempio

Ecco un elenco di TAGS HTML e attributi che può rappresentare la linea guida per la vostra esercitazione. Attenzione! Dovete raggruppare gli attributi di un TAG ed inserirli nella pagina di help del TAG stesso secondo le modalità precedentemente descritte.
Elementi di base

Tipo documento

Titolo

Testa

Corpo

Definizione struttura

Heading

Align Heading

Division

Align Division

Block Quote

Emphasis

Strong Emphasis

Citation

Code

Large Font Size

Small Font Size
Formattazione testo

Bold
Italic
Underline
non molto diffuso
Strikeout
non molto diffuso
Strikeout
non molto diffuso
Subscript
Superscript
Typewriter
(utilizza un font monospaziato)
Preformatted
mostra gli spazi cosi come sono
Width
Center
Blinking
Font Size
Change Font Size
Font Color
Select Font
Point size
Weight

LINKS, IMMAGINI, E SUONI
Link Something
Link to Location
Target Window
Link to Email
Specify Subject
Define Location
Display Image
Alignment
Alignment
Alternate
Dimensions
Border
(in pixels)
Runaround Space
(in pixels)
Imagemap
Movie Clip
Background Sound
Client-Side Map
Map Section
Divisorie
Paragraph
Align Text
Justify Text
Line Break
Clear Textwrap
Horizontal Rule
Alignment
Thickness
(in pixels)
Width
(in pixels)
Width Percent
Solid Line
No Break
Word Break
Elenchi

Unordered List

Bullet Type

Bullet Type

Ordered List

Numbering Type

Numbering Type

Starting Number

Starting Number

Definition List

SFONDI E COLORI

Tiled Bkground

Bkground Color
(order is red/green/blue)

Text Color

Link Color

Visited Link

Active Link
SPECIAL CHARACTERS

Special Character
&#?;
(dove ? è il codice ISO 8859-1)

>

&
&

"
"

Registered TM
®

Registered TM
®

Copyright
©

Copyright
©

Non-Breaking Space
 

FORMS
Define Form
File Upload
Input Field
Field Name
Field Value
Checked?
Field Size
Max Length
Selection List
# of Options
Multiple Choice
Option
Default Option
Option Value
Option Group
Input Box Size
Name of Box
Wrap Text
TABELLE
Define Table
Table Alignment
Table Border
(either on or off)
Table Border
(you can set the value)
Cell Spacing
Cell Padding
Desired Width
(in pixels)
Width Percent
(percentage of page)
Table Color
Border Color
Dark Border
Light Border
Table Row
Alignment
Table Cell
(must appear within table rows)
Alignment
No linebreaks
Columns to Span
Rows to Span
Desired Width
(in pixels)
Width Percent
(percentage of table)
Cell Color
Header Cell
(same as data, except bold centered)
Alignment
No Linebreaks
Columns to Span
Rows to Span
Desired Width
(in pixels)
Width Percent
(in % sulla tabella)
Cell Color
FRAMES
Frame Document
(instead of )
Row Heights
(pixels or %)
Row Heights
(* = relative size)
Column Widths
(pixels or %)
Column Widths
(* = relative size)
Borders
Border Width
Border Color
Frame Spacing
Define Frame
Display Document
Frame Name
Margin Width
Margin Height
Scrollbar?
Not Resizable
Borders
Border Color
Unframed Content